<template>
<van-button
:icon="value ? 'star' :'star-o'"
:class="{
  shoucan:value
}"
:loading="loading"
@click="onclick"
></van-button>
</template>

<script>
import {addCollect,deleteCollect} from '@/api/article'

export default {
  name: "CollectArticle",
  props:{

    value:{

      type:Boolean,
      required:true
    },
    articlesId:{
      type:[String,Number,Object],
      required: true
    }
  },
  data(){
    return{
      loading:false
    }
  },
  methods:{
    async onclick(){
      this.loading=true

      try {


      //  判断是添加收藏还是取消收藏
        if (this.value){
          //取消收藏
          await deleteCollect(this.articlesId)
          this.$toast.fail('取消收藏')


        }else {
          await   addCollect(this.articlesId)
          this.$toast.success('已收藏')

        }

      this.$emit('input',!this.value)


      }catch (err){
        console.log(err)

      }

      this.loading=false


    }

  }
}
</script>

<style scoped lang="less">
.shoucan{
  .van-icon{

    color: #ffa500;

  }

}
</style>
